<template>
	<view>
		<view class="tabs">
			<view class="tab_item" v-for="item in tabs" :key="item.val">
				<view class="tab_name" :class="{'tab_name_active':jx_shipping_type==item.val}">{{item.name}}</view>
				<view class="tab_underline">
					<view class="active" v-if="jx_shipping_type==item.val"></view>
					<view class="" v-else></view>
				</view>
			</view>
		</view>

		<view class="order-address" v-if="jx_shipping_type == 1">
			<view class="flex align" style="justify-content: center;">
				<view class="add-address">{{prizeDetails.jxadd}}</view>
			</view>
		</view>
		<view class="order-address" v-if="noAddress && jx_shipping_type == 2">
			<view class="flex align" style="justify-content: center;"
				@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
				<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill"
					class="order-add" />
				<view class="add-address">添加地址</view>
			</view>
		</view>
		<view v-else-if="jx_shipping_type == 2">
			<view class="order-address address-checked"
				@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
				<view class="between align">
					<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
					<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill"
						class="into" />
				</view>
				<view class="info">
					<text>{{addressMsg.name}}</text>
					<text>{{addressMsg.tel}}</text>
				</view>
			</view>
		</view>
		<view class="order-infobox">
			<view class="order-info flex">
				<image :src="prizeDetails.j7pic" mode="aspectFill" class="order-goods-img" />
				<view class="fl between column">
					<view class="font-l goods-name">{{prizeDetails.j7mc}}</view>
					<view class="goods-gg">规格：默认</view>
					<view class="between align">
						<view class="goods-gg">x1</view>
						<view class="order-goods-price c-red" v-if="prizeDetails.j7jz"><text
								class="price-util">￥</text>{{prizeDetails.j7jz}}</view>
					</view>
				</view>
			</view>

			<view v-if="false" class="">
				<view class="between align order-info">
					<view class="">运费</view>
					<view class="">￥0</view>
				</view>
				<view class="order-info">
					<view class="">获奖感言(必填）</view>
					<textarea class="acceptance-speech" placeholder="请输入获奖感言..." v-model="comment"></textarea>
				</view>
			</view>
		</view>

		<view class="explain" v-if="jx_shipping_type == 2">
			<view class="c-red">物流状态*</view>
			<view style="line-height: 46rpx;">物流名称：{{prizeDetails.jx_shipping_name}}</view>
			<view style="line-height: 46rpx;">物流单号：{{prizeDetails.jx_shipping_code}}</view>
			<view style="line-height: 46rpx;">发货时间：{{prizeDetails.jx_shipping_time}}</view>
			<view style="line-height: 46rpx;">发货状态：{{prizeDetails.jx_shipping_status_text}}</view>
		</view>

	</view>
</template>

<script>
	import {
		shippingAddress,
		getPrize,
		getPrizesDetails
	} from "../../api/index.js"
	export default {
		data() {
			return {
				tabs: [{
					name: '自提',
					val: 1
				}, {
					name: '邮寄',
					val: 2
				}, {
					name: '回收',
					val: 3
				}],
				addressMsg: {},
				isAddress: false,
				jx_shipping_type: 2,
				comment: '',
				id: '',
				jx: '',
				jxadd: '',
				pageType: '',
				noAddress: false, //是否有地址
				prizeDetails: {},
			}
		},
		onLoad(opt) {
			this.jx = opt.jx
			this.id = opt.id
			this.pageType = opt.pageType
			this.getShippingAddress()
			this.onGetPrizesDetails()
		},
		async onShow() {
			// 选取地址
			uni.$on('selectAddress', async (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh', async (data) => {
				// console.log('监听到刷新,', data)
				this.getShippingAddress()
			})
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		methods: {
			changeTabs(item) {
				this.jx_shipping_type = item.val
			},
			// 奖品详情
			async onGetPrizesDetails() {
				const res = await getPrizesDetails(`s=/ApiChoujiang/prizedetail&id=${this.id}&jx=${this.jx}&type=1`)
				const {
					status,
					msg,
					data
				} = res.data
				console.log(res, "res----")
				if (status == 1) {
					this.prizeDetails = data
					this.jx_shipping_type = data.jx_shipping_type
				} else {
					this.showToast(msg)
				}

			},
			// 确认领取
			async onSubBtn() {
				if (this.jx_shipping_type == 2)
					if (this.addressMsg == null || this.noAddress) {
						this.showToast('请完善收货地址~')
						return
					}
				const {
					name,
					tel,
					address,
					area
				} = this.addressMsg
				let addMsg = {
					name: name,
					phone: tel,
					address: address,
					area: area
				}
				const res = await getPrize('s=/ApiChoujiang/subinfo', {
					rid: this.id,
					formcontent: addMsg,
					speech: this.comment,
					jx_shipping_type: this.jx_shipping_type
				})
				const {
					status,
					msg
				} = res.data
				
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
				}
			},
			// 地址列表
			async getShippingAddress() {
				this.noAddress = false
				const res = await shippingAddress('s=/ApiAddress/address')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					data.length != 0 ? this.addressMsg = data[0] : this.noAddress = true
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.p-c {
		color: #B3B3B3;
	}
</style>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 36upx 30upx 17upx;
		box-sizing: border-box;
		background-color: #fff;

		// position: fixed; //新删掉的
		// top: 0;
		// left: 0;
		// z-index: 99;
		.tab_item {
			flex: 1;

			.tab_name {
				font-size: 30upx;
				color: #999999;
				line-height: 30upx;
				margin-bottom: 14upx;
				text-align: center;
			}

			.tab_name_active {
				color: #333333;
			}

			.tab_underline {
				display: flex;
				justify-content: center;

				>view {
					width: 40upx;
					height: 4upx;
					border-radius: 2upx;
				}

				.active {
					background-color: #41644A;
				}
			}
		}
	}

	.order-address {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;
		min-height: 160rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.box {
		margin: 20rpx;
		margin-bottom: 0;
		// background-color: #FFF4D1;
		border-radius: 20rpx 20rpx 0 0;

		.take-type {
			font-size: 27rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #FFF4D1;
		}

		.take-left {
			border-radius: 20rpx 0 20rpx 0;
		}

		.take-right {
			border-radius: 0 20rpx 0 0;
		}

		.active {
			background-color: #FFF;
			padding-top: 15rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.address-checked {
		margin-top: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.order-infobox {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 27rpx;

		.order-goods-shop {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.order-icon {
			width: 30rpx;
			height: 26rpx;
			margin-right: 20rpx;
		}

		.order-info {
			margin-top: 30rpx;

			.order-goods-img {
				width: 133rpx;
				height: 133rpx;
				margin-right: 25rpx;
				background-color: #B3B3B3;
				border-radius: 10rpx;
			}

			.goods-name {
				font-size: 29rpx;
			}

			.goods-gg {
				color: #B3B3B3;
			}

			.order-goods-price {
				font-size: 29rpx;

				.price-util {
					font-size: 24rpx;
				}
			}

			.acceptance-speech {
				background-color: #F7F7F7;
				padding: 20rpx;
				width: 610rpx;
				margin-top: 24rpx;
				font-size: 27rpx;
				height: 160rpx;
			}
		}

		.discount {
			margin-right: 16rpx;
		}

		.input-box {
			font-size: 27rpx;
			text-align: right;
		}

		.order-check {
			width: 34rpx;
			height: 34rpx;
		}


	}

	.explain {
		font-size: 24rpx;
		margin: 20rpx;

		.c-red {
			margin-bottom: 20rpx;
		}
	}

	.btn {
		margin: 20rpx;
		background-color: #41644A;
		color: #FFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>